import { useState } from 'react'

const Display = (props) => {
  const { counter } = props

  return (
    <>
      <h2>{counter}</h2>
    </>
  )
}

const Button = (props) => {
  const { handler, name } = props

  return (
    <>
      <button onClick={handler}>{name}</button>
    </>
  )
}

const App = () => {
  const [counter, setCounter] = useState(0)

  const increaseByOne = () => {
    // console.log(this)
    setCounter(counter + 1)
  }

  const reset = () => {
    setCounter(0)
  }

  return (
    <>
      <center>
        <Display counter={counter}></Display>
        <Button handler={increaseByOne} name="plus"></Button>
        <Button handler={reset} name="reset"></Button>
      </center>
    </>
  )
}

export default App
